import React, { Component } from 'react'
// 引入 ECharts 主模块
import echarts from 'echarts';
// 引入柱状图
import 'echarts/lib/chart/bar';
import 'echarts/lib/chart/pie';  //饼状图
// 引入提示框和标题组件
import 'echarts/lib/component/tooltip';
import 'echarts/lib/component/title';
import 'echarts/lib/component/legend'
import 'echarts/lib/component/markPoint'
import { getAllKindRemarkApi } from "../../apis/remarksApi"

export default class RemarkChart extends Component {
    state = {
        kinds: ["好评", "中评", "差评"],
        barSeriesData: [0, 0, 0],
        pieSiderData: []
    }

    //获得评论的数据
    componentDidMount = async () => {
        await this.getReamrksCount();
        this.initBarChart();//初始化柱状图
        this.initpieChart();//初始化饼状图
    }

    //获得好评和中评、差评的数据
    getReamrksCount = async () => {
        const data = await getAllKindRemarkApi();
        // console.log("data", data);
        const barSeriesData = [data["好评"], data["中评"], data["差评"]];
        const pieSiderData = [
            { value: data["好评"], name: '好评' },
            { value: data["中评"], name: '中评' },
            { value: data["差评"], name: '差评' },
        ]
        // console.log("sider", barSeriesData);
        this.setState({ barSeriesData, pieSiderData });
    }

    //初始化柱状图的数据
    initBarChart = () => {
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));
        // 绘制图表
        myChart.setOption({
            title: { text: '评价柱状图' },
            tooltip: {},
            xAxis: {
                data: ["好评", "中评", "差评"]//横轴的数据
            },
            yAxis: {
                type: 'value'
            },
            series: [{
                name: '销量',
                type: 'bar',
                // data: [5, 1, 4],
                data: this.state.barSeriesData,
                //设置柱状图的颜色
                itemStyle: {
                    normal: {
                        //定义一个list，然后根据所以取得不同的值，这样就实现了，
                        color: function (params) {
                            // build a color map as your need.
                            var colorList = [
                                '#C1232B', '#B5C334', '#FCCE10',
                            ];
                            return colorList[params.dataIndex]
                        },
                        //以下为是否显示，显示位置和显示格式的设置了
                        label: {
                            show: true,
                            position: 'top',// formatter: '{c}'                     
                            formatter: '{b}\n{c}'
                        }
                    }
                },
                barWidth: 70,//设置柱的宽度
            }]
        });
    }

    //初始化饼状图的数据
    initpieChart = () => {
        var huan_val = document.getElementById("huan");
        var chart = echarts.init(huan_val);
        let option = {
            color: ["#f8e367", "#99dfff", "#58c0f0"],
            title: {
                text: '评价饼状图',
                x: 'center', // x 设置水平安放位置，默认左对齐
                y: 'top',  // y 设置垂直安放位置，默认全图顶端，
                // 主标题文本样式设置
                textStyle: {
                    fontSize: 20,
                    fontWeight: 'bolder',
                    color: '#000080'
                },
            },
            //设置旁边的提示
            legend: {
                orient: 'vertical', // orient 设置布局方式，默认水平布局
                x: 'left', // x 设置水平安放位置，默认全图居中，
                y: "100px", // y 设置垂直安放位置，默认全图顶端，可选值{number}（y坐标，单位px）
                itemWidth: 24,   // 设置图例图形的宽
                itemHeight: 18,  // 设置图例图形的高
                textStyle: {
                    color: '#666'  // 图例文字颜色
                },
                itemGap: 30, // itemGap设置各个item之间的间隔，单位px，默认为10
                backgroundColor: '#eee',  // 设置整个图例区域背景颜色
                data: ["好评", "中评", "差评"]
            },
            //数据
            series: [
                {
                    name: '评价数量',
                    type: 'pie',
                    radius: '50%',  // 设置饼状图大小，100%时，最大直径=整个图形的min(宽，高)
                    data: [
                        { value: 4, name: '好评' },
                        { value: 1, name: '中评' },
                        { value: 1, name: '差评' },
                    ],
                    // itemStyle 设置饼状图扇形区域样式
                    itemStyle: {
                        // emphasis：设置鼠标放到哪一块扇形上面的时候，扇形样式、阴影
                        emphasis: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(30, 144, 255，0.1)'
                        }
                    },
                    // 设置值域的那指向线
                    labelLine: {
                        normal: {
                            show: false   // show设置线是否显示，默认为true，可选值：true ¦ false
                        }
                    },
                    // 设置值域的标签
                    label: {
                        normal: {
                            position: 'inner',  // 设置标签位置，默认在饼状图外 可选值：'outer' ¦ 'inner（饼状图上）'
                            formatter: '{c}'
                        }
                    }
                }
            ],
            //提示
            tooltip: {
                trigger: 'item',// trigger 设置触发类型，默认数据触发，可选值：'item' ¦ 'axis'
                showDelay: 20,   // 显示延迟，添加显示延迟可以避免频繁切换，单位ms
                hideDelay: 20,   // 隐藏延迟，单位ms
                backgroundColor: 'rgba(255,0,0,0.7)',  // 提示框背景颜色
                textStyle: {
                    fontSize: '16px',
                    color: '#000'  // 设置文本颜色 默认#FFF
                },
                formatter: '{a} <br/>{b} : {c}个 ({d}%)' // formatter设置提示框显示内容
                // {a}指series.name  {b}指series.data的name {c}指series.data的value  {d}%指这一部分占总数的百分比
            },
        };
        chart.setOption(option);// 绘制图表
    }
    render() {
        return (
            <div style={{ clear: 'both' }}>
                <div id="main" style={{ width: 400, height: 400, float: 'left', marginRight: 120 }}></div>
                <div id="huan" style={{ width: 600, height: 600, float: 'left' }}></div>
            </div>
        );
    }

}
